<template>
  <div>
    <ylheader :leftsvg='true' :title="'填写手机号'" ></ylheader>
    <div class="title">请输入您的手机号码</div>
    <div class="detail">
      <div >
        <table>
          <tr>
            <td class="first b-left">手机号码</td>
            <td>
              <input type="text" class="textinput" maxlength="11" v-model="phone1">
            </td>
          </tr>
          <tr>
            <td class="first b-left">再次输入</td>
            <td>  <input type="text" class="textinput" maxlength="11" v-model="phone2"></td>
          </tr>
        </table>

      </div>
    </div>
    <div class="button a-c" >
      <input name="input1" type="submit" value="提交" class="submitaddress" @click="submitphone"/>
    </div>
  </div>
</template>
<script>
import api from "src/api/index";
import ylheader from "src/components/yl-header.vue";
import {mapState,mapMutations} from "vuex";
import { Indicator } from "mint-ui";
export default {
name:"writephone",
  data(){
      return{
        data:"",
        list:[],
        phone1:"",
        phone2:"",
      }
  },
  computed: {
    ...mapState(["usercoin"])
  },
  components:{
      api,
      ylheader,
  },
  mounted(){
   console.log(this.usercoin);
  },
  methods:{
  ...mapMutations(['changeusercoin']),
   submitphone(){
    let reg = /^(((13[0-9]{1})|(15[0-9]{1})|(16[0-9]{1})|(17[3-8]{1})|(18[0-9]{1})|(19[0-9]{1})|(14[5-7]{1}))+\d{8})$/;
    if (!reg.test(this.phone1)&&!reg.test(this.phone2)) {
        this.$toast("请输入正确的手机号");
        return;
    }else if(this.phone1!=this.phone2){
        this.$toast("两次输入的电话号码不一致");
        return;
    }else{

      if(this.$route.query.tag==0){
          Indicator.open();
          setTimeout(()=>{this.exchangeRealGoods()},2000);
      }
    }
   },
   exchangeRealGoods(){
      // console.log(this.usercoin);
     Indicator.close();
     let tempData = {
         goodsId:this.$route.query.id,
         receivePhone:this.phone1
     };
     api.exchangeRealGoods(tempData).then(res=>{
         if (res.success) {
           this.$util.saveFootPrint({actType:18,typeValue:this.$route.query.id});//用户轨迹
           this.$toast("兑换成功");
           this.changeusercoin(this.usercoin-this.$route.query.price);
           this.$router.go(-1);
         } else {
           this.$toast(res.msg);
         }
     })
     
   }
  }
}
</script>
<style lang="less" scoped>
.add-h{
height: 0.96rem;
padding: 0 0.3rem;
background: #ffffff;
}
.add-icon{
  padding: 0.04rem 0.1rem 0 0;
  color: #fb725f;
  font-size: 0.34rem;
}
.addresscontent{
  font-size: 0.26rem;
  color: #777;
}
.textinput{
    height: 100%;
    line-height: 100%;
    margin-left: 3.813333rem;
    margin: 0px;
    padding: 0px;
    padding-left: 0.2rem;
    width: 100%;
    font-size: 0.28rem;
    border: none;
    outline: none;
}
.title{
  height: 0.8rem;
  line-height: 0.8rem;
  padding: 0 0.3rem;
  font-size: 0.26rem;
}
.detail{
  padding: 0 0.3rem;
  height: 2.3rem;
  background: #ffffff;
  div{
    width: 100%;
    height: 100%;
    padding: 0.3rem 0;
  }
  table{
      width: 100%;
      height: 100%;
     border-top: 1px solid #e6e6e6;
    .first{
      width: 1.75rem;
      color: #474747;
    }
    td{
        font-size: 0.28rem;
        color: #444444;
        text-align: center;
        border-bottom:1px solid #e6e6e6;
        border-right:1px solid #e6e6e6;
       
      }
  }
}
.b-left{
  border-left: 1px solid #e6e6e6;
}
.address{
    padding: 0 0.3rem;
  background: #ffffff;
}
.submitaddress {
  border: none; 
  margin-top: 0.3rem;
  font-size: 0.4rem;
  width: 3.47rem;
  height: 0.84rem;
  background: #fb685b;
  border-radius: 5px;
  color: #fffff0;
  -webkit-appearance: none
}
.button{
  height: 1rem;
}
</style>


